<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount  } from 'vue';

onMounted(() => {
    // 图
    var chartDom = document.getElementById('graph');
    var myChart = echarts.init(chartDom);
    var option;

    // 图相关配置
  option = {
    color: ['#f89f62', '#f49ff1', '#99def8'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      right: '100px',          // 关键！为右侧图例留出 80px 空间
      left: '20px',           // 左侧留适当空间给 y 轴标签
      top: '5px',
      bottom: '-20px',
      containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
    },
    legend: {
      orient: 'vertical',     // 垂直排列（推荐用于右侧）
      itemGap: 10,
      right: 15,              // 距离容器右边 10px
      top: 'middle',          // 垂直居中，也可用 'top' 或具体像素如 20
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false  // 🔥 关闭竖直方向的网格线
      }
    },
    yAxis: {
      type: 'category',
      data: [ '资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院', '交通学院', '土木工程学院', '财商学院', '体育艺术学院', '马克思主义学院', '公共基础学夸' ],
    },
    barCategoryGap: '50%',
    series: [
      {
        name: '预警人数',
        type: 'bar',
        data: [15, 14, 21, 54, 43, 45, 12, 12, 16, 45, 26],
        barWidth: '30%',
        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.6)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '总人数',
        type: 'bar',
        data: [340, 320, 524, 630, 654, 548, 895, 154, 564, 457, 652],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 0.8)',         // 字体颜色
          fontSize: 10
        },
      },
      {
        name: '参与人数',
        type: 'bar',
        data: [324, 279, 434, 602, 545, 512, 754, 145, 478, 365, 587],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'insideRight', // 可选：'top', 'insideTop', 'right' 等
          color: 'rgba(0, 0, 0, 1)',         // 字体颜色
          fontSize: 10
        },
      }
    ],
    barGap: '5%'
  };

    // 设置图形配置
    option && myChart.setOption(option);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart?.dispose();
    });
})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">测评任务进度</div>
    <div class="graph-box">
        <div class="graph-box-top" id="graph"></div>
        <div class="graph-box-bottom">
             <table>
                <thead>
                    <tr>
                        <th class="col1" style="border: none;"></th>
                        <th>资源与安全学院</th>
                        <th>智能制造学院</th>
                        <th>电气工程学院</th>
                        <th>信息工程学院</th>
                        <th>人工智能学院</th>
                        <th>交通学院</th>
                        <th>土木工程学院</th>
                        <th>财商学院</th>
                        <th>体育艺术学院</th>
                        <th>马克思主义学院</th>
                        <th>公共基础学院</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #f89f62;"></div> 预警人数</th>
                        <td>43</td>
                        <td>54</td>
                        <td>21</td>
                        <td>14</td>
                        <td>18</td>

                        <td>45</td>
                        <td>12</td>
                        <td>12</td>
                        <td>16</td>
                        <td>45</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #f49ff1;"></div>总人数</th>
                        <td>654</td>
                        <td>630</td>
                        <td>524</td>
                        <td>320</td>
                        <td>340</td>

                        <td>548</td>
                        <td>895</td>
                        <td>154</td>
                        <td>564</td>
                        <td>475</td>
                        <td>652</td>
                    </tr>
                    <tr>
                        <th class="col1"><div class="legend" style="background-color: #99def8;"></div>参与人数</th>
                        <td>545</td>
                        <td>602</td>
                        <td>434</td>
                        <td>279</td>
                        <td>324</td>

                        <td>512</td>
                        <td>754</td>
                        <td>145</td>
                        <td>478</td>
                        <td>365</td>
                        <td>587</td>
                    </tr>
                </tbody>
             </table>
        </div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    height: 476px;
    background-color: white;

}
.graph-box-top {
    height: 72%;
    /* background-color: red; */
}
.graph-box-bottom {
    /* padding: 10px 10px; */
    padding: 0px 20px;
    height: 28%;
    /* background-color: blue; */
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    color: rgba(0, 0, 0, .5);
}
th, td {
    border: 1px solid rgba(0, 0, 0, .3);
    /* padding: 10px; */
    text-align: center;
  font-size: 12px;
}
.col1 {
  font-size: 10px;
    width: 9%;
    padding-left: 12px;
    text-align: left;
}
.legend {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 4px;
    /* background-color: red; */
}
</style>
